<script lang="ts" setup>
import {
  api,
  getOneByCondition,
  getReadonly,
  insertOne,
  reSetDialogModel,
  updateOne,
  urls
} from '@/index';

import type { DialogModel, ProjectNdeProcedure } from '@/index.d';
import type { FormInstance, FormRules } from 'element-plus';

const dialogModel = defineModel<DialogModel<ProjectNdeProcedure>>('dialogModel', {
  required: true
});

const { insertForbidden, updateForbidden } = getReadonly(dialogModel.value);

const formData = reactive<ProjectNdeProcedure>({
  id: 0
});

const setFormData = async (res: ProjectNdeProcedure) => {
  formData.id = res.id;
  formData.creator = res.creator;
  formData.createTime = res.createTime;
  formData.updater = res.updater;
  formData.updateTime = res.updateTime;
  formData.projectId = res.projectId;
  formData.projectName = res.projectName;
  formData.project = res.project;
  formData.method = res.method;
  formData.name = res.name;
  formData.reference = res.reference;
  formData.procedureVersion = res.procedureVersion;
  formData.commentType = res.commentType;
  formData.prepareUsername = res.prepareUsername;
  formData.reviewUsername = res.reviewUsername;
  formData.approveUsername = res.approveUsername;
  formData.note = res.note;
  formData.prepareDate = res.prepareDate;
  formData.publishDate = res.publishDate;
  formData.formalProcedureAttachmentUuid = res.formalProcedureAttachmentUuid;
  formData.formalProcedureAttachmentUrl = res.formalProcedureAttachmentUrl;
  formData.otherAttachmentUuid = res.otherAttachmentUuid;
};

const reSetFormData = () => {
  reSetDialogModel(dialogModel);
  formData.id = 0;
  delete formData.projectId;
  delete formData.projectName;
  delete formData.project;
  delete formData.method;
  delete formData.name;
  delete formData.reference;
  delete formData.procedureVersion;
  delete formData.commentType;
  delete formData.prepareUsername;
  delete formData.reviewUsername;
  delete formData.approveUsername;
  delete formData.note;
  delete formData.prepareDate;
  delete formData.publishDate;
  delete formData.formalProcedureAttachmentUuid;
  delete formData.formalProcedureAttachmentUrl;
  delete formData.otherAttachmentUuid;
};

watch(
  () => dialogModel.value.visible,
  value => {
    value && (formData.id = dialogModel.value.id as number);
    !value && reSetFormData();
  },
  {
    immediate: true
  }
);

watch(
  () => formData.id,
  async (value: number | undefined) => {
    if (value) {
      const res = await getOneByCondition<ProjectNdeProcedure>(
        urls.projectNdeProcedure,
        'id',
        value
      );
      res && setFormData(res);
    }
  },
  {
    immediate: true
  }
);

const formDataRef = useTemplateRef<FormInstance>('formDataRef');

interface FormDataRules {
  projectId: number;
  method: string;
  name: string;
  reference: string;
  procedureVersion: string;
  prepareUsername: string;
  prepareDate: string;
  commentType: string;
}

const formDataRules = computed(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return reactive({});

    case 'update':
      return reactive<FormRules<FormDataRules>>({
        projectId: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
        method: [{ required: true, message: '方法不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }],
        reference: [{ required: true, message: '规程编号不能为空', trigger: 'blur' }],
        procedureVersion: [{ required: true, message: '规程版本不能为空', trigger: 'blur' }],
        prepareUsername: [{ required: true, message: '编制人员不能为空', trigger: 'blur' }],
        prepareDate: [{ required: true, message: '编制日期不能为空', trigger: 'blur' }],
        commentType: [{ required: true, message: '外审意见不能为空', trigger: 'blur' }]
      });

    case 'insert':
      return reactive<FormRules<FormDataRules>>({
        projectId: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
        method: [{ required: true, message: '方法不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '规程名称不能为空', trigger: 'blur' }],
        reference: [{ required: true, message: '规程编号不能为空', trigger: 'blur' }],
        procedureVersion: [{ required: true, message: '规程版本不能为空', trigger: 'blur' }],
        prepareUsername: [{ required: true, message: '编制人员不能为空', trigger: 'blur' }],
        prepareDate: [{ required: true, message: '编制日期不能为空', trigger: 'blur' }],
        commentType: [{ required: true, message: '外审意见不能为空', trigger: 'blur' }]
      });
  }
});

const saveFormData = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl
    .validate()
    .then(async valid => {
      if (valid) {
        if (dialogModel.value.id === 0) {
          const res = (await insertOne<ProjectNdeProcedure>(
            urls.projectNdeProcedure,
            formData
          )) as ProjectNdeProcedure;
          if (res) {
            setFormData(res);
            dialogModel.value.id = res.id as number;
            dialogModel.value.type = 'update';
            dialogModel.value.change = true;
          }
        } else {
          const tempFormData: ProjectNdeProcedure = {
            id: formData.id,
            projectId: formData.projectId,
            method: formData.method,
            name: formData.name,
            reference: formData.reference,
            procedureVersion: formData.procedureVersion,
            prepareUsername: formData.prepareUsername,
            reviewUsername: formData.reviewUsername,
            approveUsername: formData.approveUsername,
            commentType: formData.commentType,
            prepareDate: formData.prepareDate,
            publishDate: formData.publishDate,
            note: formData.note
          };

          const res = (await updateOne<ProjectNdeProcedure>(
            urls.projectNdeProcedure,
            tempFormData
          )) as ProjectNdeProcedure;

          if (res) {
            dialogModel.value.change = true;
            formData.updater = res.updater;
            formData.updateTime = res.updateTime;
          }
        }
      }
    })
    .catch(res => console.log(res));
};
</script>
<template>
  <HqDialogDetail
    :dialog-model="dialogModel"
    @submit="saveFormData(formDataRef as FormInstance)"
    operate-record
    :operation="formData"
  >
    <template #default>
      <el-card shadow="hover">
        <template #header>基本信息</template>
        <template #default>
          <hq-form :model="formData" ref="formDataRef" :rules="formDataRules">
            <el-row :gutter="5">
              <hq-col v-show="false">
                <el-form-item label="id" prop="id">
                  <el-input v-model="formData.id" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="项目名称" prop="projectId">
                  <el-select v-model="formData.projectId" :disabled="updateForbidden">
                    <HqProjectNameOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="检测方法" prop="method">
                  <el-select v-model="formData.method" :disabled="updateForbidden">
                    <HqNdeMethodOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="规程名称" prop="name">
                  <el-input v-model="formData.name" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="规程编号" prop="reference">
                  <el-input v-model="formData.reference" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="规程版本" prop="procedureVersion">
                  <el-input v-model="formData.procedureVersion" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="编制人员" prop="prepareUsername">
                  <el-select
                    v-model="formData.prepareUsername"
                    clearable
                    :disabled="updateForbidden"
                  >
                    <HqUserOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="审核人员" prop="reviewUsername">
                  <el-select
                    v-model="formData.reviewUsername"
                    clearable
                    :disabled="updateForbidden"
                  >
                    <HqUserOptions />
                  </el-select>
                </el-form-item>
              </hq-col>

              <hq-col>
                <el-form-item label="批准人员" prop="approveUsername">
                  <el-select
                    v-model="formData.approveUsername"
                    clearable
                    :disabled="updateForbidden"
                  >
                    <HqUserOptions />
                  </el-select>
                </el-form-item>
              </hq-col>

              <hq-col>
                <el-form-item label="外审意见" prop="commentType">
                  <el-select v-model="formData.commentType" clearable :disabled="updateForbidden">
                    <el-option key="批准" label="批准" value="批准" />
                    <el-option key="驳回" label="驳回" value="驳回" />
                    <el-option key="备案" label="备案" value="备案" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="编制日期" prop="prepareDate">
                  <el-date-picker
                    v-model="formData.prepareDate"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :readonly="updateForbidden"
                  />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="发布日期" prop="publishDate">
                  <el-date-picker
                    v-model="formData.publishDate"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    :readonly="updateForbidden"
                  />
                </el-form-item>
              </hq-col>
            </el-row>

            <el-row>
              <el-form-item label="备注" prop="note" style="width: 100%">
                <el-input
                  v-model="formData.note"
                  type="textarea"
                  :autosize="{ minRows: 5 }"
                  :readonly="updateForbidden"
                />
              </el-form-item>
            </el-row>
          </hq-form>
        </template>
      </el-card>

      <el-card shadow="hover" v-if="formData.formalProcedureAttachmentUuid">
        <template #header>发布版本附件</template>

        <template #default>
          <HqUploadOne
            :key-word="formData.formalProcedureAttachmentUuid"
            :disabled="dialogModel.type !== 'update'"
          />
        </template>
      </el-card>

      <el-card shadow="hover" v-if="formData.otherAttachmentUuid">
        <template #header>其它相关附件</template>

        <template #default>
          <HqUploadMany
            :key-word="formData.otherAttachmentUuid"
            :disabled="dialogModel.type !== 'update'"
          />
        </template>
      </el-card>
    </template>
  </HqDialogDetail>
</template>
<style lang="scss" scoped></style>
